<template>
  <div class="phone-container">
    <h2 class="title">登录</h2>
    <div class="field">
      <i class="iconfont icon-user"></i>
      <label class="label">
        <input
          class="input"
          v-model="phone"
          maxlength="11"
          placeholder="请输入手机号码"
          type="tel"
        />
      </label>
    </div>
    <div class="field">
      <i class="iconfont icon-lock"></i>
      <label class="label">
        <input
          maxlength="30"
          v-model="password"
          class="input"
          type="password"
          placeholder="请输入密码"
        />
      </label>
    </div>
    <div class="space"></div>
    <div class="button" @click="onLogin">
      <span class="button-text">登录</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "../../api/login";
import { Toast } from "vant";
import { useStore } from 'vuex'

export default defineComponent({
  name: "Login",
  setup() {
    const store = useStore()
    // const isCodeMode = ref(false)
    const phone = ref("18301599306");
    const password = ref("yg6224002");
    const router = useRouter();

    async function onLogin() {
      const res = await login(phone.value, password.value);
      if (res.data.account) {
        Toast.success("登录成功");
        router.push("/my");
        store.commit("setUser", phone);
      } else {
        Toast.fail("用户名或密码错误");
      }
    }

    return {
      phone,
      password,
      onLogin,
    };
  },
});
</script>

<style scoped>
.phone-container {
  margin: 0 auto;
  padding-top: 14vh;
  width: 80vw;
  overflow: hidden;
  transition: all 0.2s;
}

.title {
  padding: 40rem 0;
}

.field {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 32rem;
  padding: 32rem;
  display: flex;
  align-items: center;
  background-color: var(--five-level);
  border-radius: 12rem;
}

.field .iconfont {
  color: var(--primary-color);
  font-size: 40rem;
  vertical-align: -8%;
}

.field .label {
  flex: 1;
}

.input {
  width: 100%;
  box-sizing: border-box;
  outline: none;
  border: none;
  padding: 0 12rem;
  font-size: 30rem;
  background-color: transparent;
  caret-color: var(--primary-color);
}

.input::placeholder {
  color: var(--three-level);
}

.get-code {
  display: inline-block;
  color: var(--primary-color);
  font-size: 26rem;
}

.space {
  height: 32rem;
}

.button {
  padding: 32rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  border-radius: 12rem;
}

.button-text {
  color: #fff;
  letter-spacing: 20rem;
  margin-left: 20rem;
  font-size: 34rem;
}
</style>
